<script>
import { login } from '@/api/index.js'
import { useBaseStore } from '../stores/useBaseStore.js'
import { mapStores } from 'pinia'

export default {
  data() {
    return {
      params: {
        username: '',
        password: '',
        usertype: 1,
      },
    }
  },
  computed: {
    ...mapStores(useBaseStore),
  },
  methods: {
    gotoHome() {
      this.$router.push({
        name: 'home',
      })
    },
    async dologin() {
      let data = await login(this.params)
      this.baseStore.setLoginData(data.token, data.user)
      this.gotoHome()
    },
  },
}
</script>
<template>
  <div class="login-box">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">管理员登录</div>
      </template>
      <el-form>
        <el-form-item class="item">
          <el-input type="text" size="large" placeholder="学号/工号/账号" v-model="params.username">
            <template #prefix><EpUser /></template>
          </el-input>
        </el-form-item>
        <el-form-item class="item">
          <el-input
            type="password"
            size="large"
            placeholder="请输入登录密码"
            v-model="params.password"
          >
            <template #prefix><EpLock /></template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-radio-group class="btn-group" size="large" v-model="params.usertype">
            <el-radio-button label="学生" :value="3" />
            <el-radio-button label="教师" :value="2" />
            <el-radio-button label="管理员" :value="1" />
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button class="btn" type="primary" size="large" @click="dologin()">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<style scoped>
.login-box {
  background-image: url('../assets/img/login-background.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box-card {
  transform: translateY(-100px);
  width: 400px;
}
.card-header {
  text-align: center;
}
.btn {
  width: 100%;
}
.btn-group {
  width: 100%;
}
.el-radio-button {
  flex-grow: 1;
}
:deep(.el-radio-button__inner) {
  width: 100%;
}
</style>
<script setup lang="ts"></script>
